
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>登录</title>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css" >
	<link rel="stylesheet"  href="css/me.css" >
</head>
<body>
	<br />
	<br />
	<div class="m-container-small m-padded-tb-massive" style="max-width: 30em !important;">
		<div class="ui container">
			<div class="ui middle aligned center aligned grid">
				<div class="column">
					<h2 class="ui teal image header">
					
						<div class="content">
							欢迎回来
						</div>
					</h2>
					<form id="app" name="app" class="ui large form">
						<div class="ui stacked segment">
							<div class="field">
							  <div class="ui left icon input">
								<i class="user icon"></i>
								<input type="text" id="username" name="username" placeholder="账号">
							  </div>
							</div>
							<div class="field">
							  <div class="ui left icon input">
								<i class="lock icon"></i>
                                    <input type="password" id="password" name="password" placeholder="密码">
							  </div>
							</div>
							<div class="field" style="display:none;" id="msgDiv">
							  <div class="ui left icon input">
                                  <span style="color: red; align-content: center;" id="msg">用户名或密码不正确</span>
							  </div>
							</div>
						
							
							<div class="ui fluid large teal  button" onclick="login()">登录</div>
						</div>

					</form>
					<div class="ui message">
					  新用户？ <a href="register.html">注册</a>
					</div>
				</div>
			</div>

		</div>
	</div>

    <script src="js/jquery.min.js"></script>
    <script src="js/semantic.min.js"></script>
    <script src="js/axios.js"></script>
    
<script>

	 function login(){
	 	var username=$("#username").val();
	 	var password=$("#password").val();
	 	var values={};
	 	values.username=username;
	 	values.password=password;
        axios.post('loginIn',values).then(function (res){
            var data=res.data;
            if(data.code==200){
            	localStorage.setItem("token",data.token);
				localStorage.setItem("username",data.username);
				localStorage.setItem("type",data.type);
				window.location.href="index.html";
			}else{
            	$("#msg").html(data.msg);
            	$("#msgDiv").show();
			}
		})

	 }

</script>   
    
    
    
</body>
</html>
